<template>
  <el-tree-select
    ref="treeRef"
    v-model="selectValue"
    :data="selectMenuList"
    :props="data.defaultProps"
    :node-key="data.defaultProps.value"
    :multiple="props.isMultiple"
    filterable
    :check-strictly="props.isCheckStrictly"
    :render-after-expand="false"
    :show-checkbox="props.isMultiple"
    check-on-click-node
    :placeholder="`请选择${data.name}`"
    :collapse-tags="props.maxCollapseTags ? true : false"
    :collapse-tags-tooltip="props.maxCollapseTags ? true : false"
    :max-collapse-tags="props.maxCollapseTags"
    :disabled="props.disabled"
    @check="treeChange"
    @change="treeChange"
    :style="`width:${props.width ? props.width : '100%'}`"
    clearable
  />
</template>
<script setup lang="ts">
import request from "@/utils/request";

defineOptions({
  name: "SelectOriganization",
  inheritAttrs: false,
});

/**
 * @description 传参 data
 * @param name placeholder中的值
 * @param defaultProps 自定义选中参数
 * @param api 接口
 * */
const props = defineProps({
  maxCollapseTags: {
    type: Number,
    default: () => {
      return 0;
    },
  },
  isMultiple: {
    type: Boolean,
    default: true,
  },
  isCheckStrictly: {
    type: Boolean,
    default: false,
  },
  width: {
    type: Number,
    default: () => {
      return 0;
    },
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  selectData: null,
  data: {
    type: Object,
    default: () => {
      return {
        name: "组织机构",
        defaultProps: {
          children: "nodes",
          label: "organizationName",
          value: "id",
        },
        api: "/system/sysOrganization/getUsableTree",
      };
    },
  },
  hasParent: {
    // 是否需要手动添加父级
    type: Boolean,
    default: false,
  },
  defaultParent: {
    // 是否默认回显最外层id
    type: Boolean,
    default: false,
  },
});

// const { name, defaultProps, api } = toRefs(props.data);
const { data } = toRefs(props);

const selectValue = ref();
const selectMenuList = ref();
const treeRef = ref<InstanceType<typeof ElTree>>();
onMounted(async () => {
  const children: any = await getOrganizations();
  if (!props.hasParent) {
    selectMenuList.value = children;
  } else {
    selectMenuList.value = [
      {
        id: "0",
        organizationName: "公司级",
        nodes: children,
      },
    ];
  }

  nextTick(() => {
    selectValue.value = props.selectData
      ? props.selectData
      : props.defaultParent && children[0]?.id
      ? children[0]?.id
      : null;

    if (props.defaultParent && children[0]?.id) {
      emit("change", selectValue.value);
    }
  });
});

// 回显被选数据
watch(
  () => props.selectData,
  () => {
    selectValue.value = props.selectData;
  },
  { deep: true }
);

// 自定义选择事件
const emit = defineEmits(["change", "change-data"]);

function treeChange() {
  let isClear = false;
  if (!selectValue.value || !selectValue.value.length) {
    isClear = true;
  }
  if (props.isMultiple) {
    emit(
      "change-data",
      isClear ? [] : treeRef.value?.getCheckedNodes(!props.isCheckStrictly)
    );
  } else {
    emit("change-data", isClear ? "" : treeRef.value?.getCurrentNode());
  }
  emit("change", selectValue.value);
}

// 组织机构接口请求
async function getOrganizations() {
  return new Promise<void>(async (resolve, reject) => {
    try {
      const { data } = await request({
        url: props.data.api,
        method: "post",
        data: {},
      });
      resolve(data);
    } catch (e) {
      reject(e);
    }
  });
}
</script>
